<template>
  <div class="shopping_item">
    <div class="shopping_item_text">
      <div class="shopping_item_text_1">
        {{text[0]}}
        <span v-for="(item, index) in text" :key="index">
        {{item}}
      </span>
      </div>
    </div>
    <div class="shopping_item_shopping1">
      <div class="shopping_item_shopping1_1">
        <div class="shopping_item_shopping" v-for="(item, index) in shopping1" :key="item.id">
          <img :src="item.img" style="width: 150px; height: 150px;"/>
          <span style="width: 150px; height: 150px;">{{item.title}}</span>
          <span style="width: 150px; height: 150px; color: red;">￥{{item.price}}</span>
          <span style="width: 150px; height: 150px;">{{item.youPrice}}￥ <el-tag type="success">会员价</el-tag></span>
          <div style="display: flex;">
            <el-button style="display: block; width: 16px; height: 16px;"><i class="el-icon-shopping-cart-2"/></el-button>
            <el-button >
              <i class="el-icon-film"/>
              <span>加入购物清单</span>
            </el-button>
          </div>

        </div>
        </div>
    </div>
    <div class="shopping_item_shopping2">

      <div class="shopping_item_shopping_2" v-for="(item, index) in shopping2" :key="item.id" style="display: flex;" >

        <div>
          <img :src="item.img" style="width: 80px; height: 80px;">
        </div>
        <div style="display: flex; flex-direction: column;">
          <span>{{item.title}}</span>
          <span style="color: red;">￥{{item.price}} </span>
          <span>{{item.youPrice}}￥ <el-tag type="success">会员价</el-tag></span>
          <div style="display: flex;">
            <el-button style="display: block; width: 16px; height: 16px;"><i class="el-icon-shopping-cart-2"/></el-button>
            <el-button >
              <i class="el-icon-film"/>
              <span>加入购物清单</span>
            </el-button>
          </div>
        </div>

      </div>

    </div>
    <div class="shopping_item_right">
      <div class="shopping_item_right_rate">
        <span>您的评价如何？</span>
        <el-rate
            v-model="value"
            show-text>
        </el-rate>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShoppingItem",
  props: {
    text: {
      type: Array,
      default: '无说明'
    },
    shopping1: {
      type: Array,
      default: '无说明'
    },
    shopping2: {
      type: Array,
      default: '无说明'
    }
  },
  data() {
    return {
      value: null
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.shopping_item {
  border-radius: 100px 0 0 20px ;
  margin: 30px 150px;
  height: 350px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .shopping_item_text {
    height: 100%;
    width: 200px;
    background-color: #5a5e66;
    .shopping_item_text_1 {
      display: flex;
      flex-direction:column;
      margin-left: 30px;  margin-top: 30px;
    }
  }
  .shopping_item_shopping1 {
    height: 100%;
    width: 400px;
    background:rgba(255,255,255);
    .shopping_item_shopping1_1 {
      display: flex; width: 85%; height:100%;
       margin-left: 35px;
      background:rgba(255,255,255);
      .shopping_item_shopping {
        overflow: hidden;
        padding-top: 10px; padding-right: 30px ; padding-bottom: 10px ;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .shopping_item_shopping2 {
    height: 100%;
    width: 380px;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .shopping_item_shopping_2 {
      width: 380px;
      padding-right: 30px ; padding-bottom: 10px ;
    }
  }
  .shopping_item_right {
    border-radius: 40px;
    width: 290px;
    background:rgba(250, 251, 254);
    .shopping_item_right_rate {
      margin-left: 30px; margin-top: 30px;
    }
  }
}
.el-button--medium {
  padding: 0 0;
  font-size: 14px;
  border-radius: 4px;
}
.el-tag--medium {
  height: 19px;
  line-height: 19px;
}

</style>
